<!-- components/Phone.vue -->
<template>
  <section class="product-section" v-if="products && products.length > 0">
    <h2 class="section-title">手机专区</h2>
    <div class="products">
      <div
          class="product-card"
          v-for="product in products"
          :key="product.id"
      >
        <div class="product-image">
          <i class="fas fa-mobile-alt"></i>
        </div>
        <div class="product-info">
          <h3 class="product-title">{{ product.name }}</h3>
          <div class="product-price">¥ {{ product.price }}</div>
          <div class="product-actions">
            <button class="btn btn-primary" @click="addToCart(product)">
              加入购物车
            </button>
            <button class="btn btn-outline">查看详情</button>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import { inject } from 'vue'

// 定义props接收产品数据
defineProps<{
  products: any[]
}>()

const addToCart = inject('addToCart') as (product: any) => void
</script>

<style scoped>
.product-section {
  background-color: white;
  border-radius: 10px;
  padding: 20px;
  margin: 30px 0;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
</style>